<settings-screen>
  <group-name group="group"></group-name>

  <div class="row">
    <div class="col-lg-4">
      <ul class="tab-nav">
        <li role="presentation" class="active">
          <a href="groups/{{group.id}}">Members</a>
        </li>
        <li role="presentation" ng-if="currentUser.isAdmin">
          <a href="groups/{{group.id}}/data_sources">Data Sources</a>
        </li>
      </ul>
    </div>

    <div class="col-lg-8" ng-if="currentUser.isAdmin">
      <ui-select ng-model="newMember.selected" on-select="addMember($item)">
        <ui-select-match placeholder="Add New Member"></ui-select-match>
        <ui-select-choices repeat="user in foundUsers | filter:$select.search" refresh="findUser($select.search)" refresh-delay="0"
          ui-disable-choice="user.alreadyMember">
          <div class="d-flex align-items-center">
            <img ng-src="{{ user.profile_image_url }}" class="profile__image" height="24px">&nbsp;
            <span ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
            <small ng-if="user.alreadyMember">(already member in this group)</small>
          </div>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
  <div class="row m-t-5">
    <div class="col-lg-12">
      <table class="table table-condensed table-hover" ng-show="members">
        <tbody>
          <tr ng-repeat="member in members">
            <td width="50px">
              <img ng-src="{{ member.profile_image_url }}" class="profile__image" height="40px" />
            </td>
            <td ng-class="{'text-muted': member.is_disabled}">
              <a href="users/{{member.id}}">{{member.name}}</a>
              <button class="pull-right btn btn-sm btn-danger" ng-click="removeMember(member)" ng-if="currentUser.isAdmin && (group.type != 'builtin' || currentUser.id != member.id)">Remove</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div ng-hide="members.length">
        No members.
      </div>
    </div>
  </div>
</settings-screen>